import 'package:flutter/material.dart';
import 'listData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.pink),
        home: Scaffold(
          appBar: AppBar(title: Text('GridView')),
          body: HomePage(),
        ));
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Padding组件
    /*return Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
      child: GridView.count(
        crossAxisCount: 3,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover,),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/2.png',fit: BoxFit.cover,),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/3.png',fit: BoxFit.cover,),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/4.png',fit: BoxFit.cover,),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/5.png',fit: BoxFit.cover,),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/6.png',fit: BoxFit.cover,),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/7.png',fit: BoxFit.cover,),
          )
        ],
      )
    );*/
    // 水平布局组件
    /*return Container(
      height: 600,
      width: 400,
      color: Colors.yellow,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 水平方向显示方式 相当于flex布局
        crossAxisAlignment: CrossAxisAlignment.start, // 垂直方向显示方式 用的比较少
        children: <Widget>[
          IconContainer(Icons.alarm, color: Colors.orange,size: 50.0,),
          IconContainer(Icons.alarm, color: Colors.red,size: 50.0,),
          IconContainer(Icons.alarm, color: Colors.blue,size: 50.0,),
          IconContainer(Icons.alarm, color: Colors.green,size: 50.0,)
        ],
      ),
    );*/
    // 垂直布局组件
    /*return Container(
      height: 600,
      width: 400,
      color: Colors.yellow,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 主轴方向显示方式 相当于flex布局
        crossAxisAlignment: CrossAxisAlignment.center, // 次轴方向显示方式 用的比较少
        children: <Widget>[
          IconContainer(Icons.alarm, color: Colors.orange,size: 50.0,),
          IconContainer(Icons.alarm, color: Colors.red,size: 50.0,),
          IconContainer(Icons.alarm, color: Colors.blue,size: 50.0,),
          IconContainer(Icons.alarm, color: Colors.green,size: 50.0,)
        ],
      ),
    );*/
    // Expaned组件
    return Row(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: IconContainer(Icons.home, color: Colors.blue,size: 50.0,),
        ),
        Expanded(
          flex: 2,
          child: IconContainer(Icons.home, color: Colors.red,size: 50.0,),
        ),
        IconContainer(Icons.alarm, color: Colors.orange,size: 50.0,),
      ],
    );
  }
}

class IconContainer extends StatelessWidget {

  double size = 50.0;
  Color color = Colors.red;
  IconData icon;
  IconContainer(this.icon, {this.color, this.size});
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: this.color,
      child: Center(
        child: Icon(this.icon, size: this.size,color: Colors.white,),
      ),
    );
  }
}
